<template>
  <div>
    <SetDesignDialog title="添加主容器" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="常用布局" name="1">
            <el-form :model="form" @submit.native.prevent>
                <el-form-item label="插入位置" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.position">
                    <el-radio size="mini" :label="-1">顶部</el-radio>
                    <el-radio size="mini" :label="-2">底部</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="layout-list-u">
              <el-scrollbar style="height:100%;">
              <ul>
                <li v-for="num in 6" :key="num" :class="{selected: identifier === num}" @click="selectLayout(num)">
                  <div class="item-u">
                    <el-popover :placement="num % 2 === 0 ? 'left' : 'right'" width="240" trigger="hover" :close-delay="0" @hide="onPopoverHide">
                      <div class="tel-img-u"><span>手机端展示</span><img :src="require('@/assets/images/layout/1/layout_tel_' + num + '.png')"/></div>
                      <div slot="reference" class="img-u"><img :src="require('@/assets/images/layout/1/layout_' + num + '.png')"/></div>
                    </el-popover>
                  </div>
                </li>
              </ul>
              </el-scrollbar>
            </div>
          </el-tab-pane>
          <el-tab-pane label="空白布局" name="2">
            <div class="dlg-main-box mainContainer-add">
              <el-form :model="form" @submit.native.prevent>
                <el-form-item label="插入位置" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.position">
                    <el-radio size="mini" :label="-1">顶部</el-radio>
                    <el-radio size="mini" :label="-2">底部</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="选择栅格类型" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.girdtype" class="radio-disblock">
                    <el-radio size="mini" label="col-sm">768px及以下（手机竖屏）换行</el-radio>
                    <el-radio size="mini" label="col-md">992px及以下（手机横屏）换行</el-radio>
                    <el-radio size="mini" label="col-lg">1200px及以下（ipad）换行</el-radio>
                    <el-radio size="mini" label="col-xs">不换行</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="列数" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-input size="mini" type="number" style="width:80px;" v-model="form.col" min="1" max="24"
                    placeholder="">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其他布局" name="3">
            <el-form :model="form" @submit.native.prevent>
                <el-form-item label="插入位置" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                  <el-radio-group v-model="form.position">
                    <el-radio size="mini" :label="-1">顶部</el-radio>
                    <el-radio size="mini" :label="-2">底部</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="layout-list-u">
              <el-scrollbar style="height:100%;">
              <ul>
                <li v-for="num in 8" :key="num" :class="{selected: identifier === num}" @click="selectLayout(num)">
                  <div class="item-u">
                    <el-popover :placement="num % 2 === 0 ? 'left' : 'right'" width="240" trigger="hover" :close-delay="0" @hide="onPopoverHide">
                      <div class="tel-img-u"><span>手机端展示</span><img :src="require('@/assets/images/layout/2/layout_tel_' + num + '.png')"/></div>
                      <div slot="reference" class="img-u"><img :src="require('@/assets/images/layout/2/layout_' + num + '.png')"/></div>
                    </el-popover>
                  </div>
                </li>
              </ul>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'
import { mapState } from 'vuex'
export default {
  created () {
    VueFunctions.method(WindowType.ADD_CONTAINER_MAINBOX, (obj) => {
      this.dialogShow = true
      if (obj && obj.backSuccess) {
        this.backSuccess = obj.backSuccess
      }
      this.$nextTick(() => {
        this.$refs['settingDialog'].open()
      })
    })
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      identifier: null,
      type: 1,
      form: {
        position: -2,
        girdtype: 'col-sm',
        col: 1
      },
      formLabelWidth: '120px',
      // 点击确定下的回调函数，一般都是开启编辑弹窗赋值方法函数变量
      backSuccess: null
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name === '1') {
        this.type = 1
      } else if (tab.name === '3') {
        this.type = 2
      } else {
        this.type = null
      }
      this.identifier = ''
    },
    selectLayout (num) {
      this.identifier = num
    },
    onPopoverHide () {
      let elPopovers = document.getElementsByClassName('el-popover')
      for (let i = 0; i < elPopovers.length; i++) {
        if (elPopovers[i] != null) {
          elPopovers[i].parentNode.removeChild(elPopovers[i])
        }
      }
    },
    show () {
      this.dialogShow = true
      this.$nextTick(() => {
        this.$refs['settingDialog'].open()
      })
    },
    // 关闭弹出层
    close () {
      this.dialogShow = false
      this.form = {
        position: -2,
        girdtype: 'col-sm',
        col: 1
      }
      this.activeName = '1'
      this.identifier = null
      this.type = 1
    },
    saveclose () {
      // 点击确定后通过 this.form 制作出一套完成的容器数据json
      if (this.activeName === '2') {
        BackendjsFunctions.addSpublicContainerMainBox(_.cloneDeep(this.form))
        if (this.backSuccess && typeof this.backSuccess === 'function') {
          this.backSuccess()
          this.backSuccess = null
        }
        this.close()
      } else if (this.activeName === '1' || this.activeName === '3') {
        // position: -1 顶部 , -2 底部
        // type：1常用布局，3其他布局
        // identifier：选择的编号
        if (!this.identifier) {
          this.$message.error('请选择布局！')
        } else {
          BackendjsFunctions.addSpublicContainers(this.form.position, parseInt(this.type), parseInt(this.identifier))
          this.close()
        }
      }
    }
  },
  components: {
    SetDesignDialog
  }
}

</script>

<style scoped lang="scss">
.radio-disblock {
  padding-top: 5px;
  padding-bottom: 10px;

  /deep/ .el-radio {
    line-height: 30px;
    display: block;
  }
}

.mainContainer-add{
  height: 400px;
}

.layout-list-u {
  height: 400px;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 -10px;
    display: block;

    &:after {
      content:""; display:block; clear:both; height:0; visibility:hidden;
    }

    li {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 50%;
      float: left;

      &:nth-child(2n+1) {
        clear: both;
      }

      .item-u {
        margin:0 10px 20px;
        border: 1px solid #e9e9e9;
        text-align: center;
        cursor: pointer;
        padding: 10px;

        img {
          max-width: 100%;
        }
      }
      &:hover .item-u, &.selected .item-u {
        border-color: #258FFB;
      }
    }
  }
}
.tel-img-u {
  text-align: center;
  span{
    color: #555;
    margin-bottom: 10px;
    display: block;
  }
  img {
    max-width: 100%;
  }
}
.edit-container-u /deep/ {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .is-horizontal{
    display: none;
  }
}
</style>
